<template>
  <div class="page">
    <index-head />
    <div class="author">
      <div class="author-title">
        {{ info.articleTitle }}
      </div>
      <div class="author-data">
        <div class="author-img">
          <img :src="info.userAvatar" alt="">
        </div>
        <div class="author-name">
          <div class="author-head">
            <div class="author-nick">{{ info.userName }}</div>
            <div class="author-follow">+关注</div>
          </div>
          <div class="author-bottom">
            <div class="author-time">{{ info.createTime }}</div>
            <div class="author-read">阅读数：12</div>
          </div>
        </div>
      </div>
      <div class="author-content" v-html="info.articleContent" />
    </div>
  </div>
</template>

<script>
import indexHead from '@/components/Head'
import { getList } from '@/api/detail.js'
export default {
  components: {
    indexHead
  },
  data() {
    return {
      id: null,
      info: Object
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.list()
  },
  methods: {
    list() {
      const data = {
        articleId: this.id
      }
      getList(data).then(response => {
        this.info = response.data.result
        // console.log(response.data.result)
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.author
  margin: 0 auto
  width: 620px
  padding-top: 120px
  color: #333
  .author-title
    font-size: 34px
    font-weight: 700
  .author-data
    padding-top: 20px
    height: 3rem
    margin-bottom: 50px
    .author-img
      width: 48px
      float: left
      & img
        width: 100%
        border-radius: 50%
    .author-name
      padding-left: 15px
      float: left
      width: 500px
      .author-head
        height: 18px
        margin-bottom: 9px
        margin-top: 6px
        .author-nick
          margin-right: 5px
          float: left
        .author-follow
          font-size: 12px
          float: left
          line-height: 4px
          background: #42c02e
          color: #fff
          padding: 7px 9px
          cursor: pointer
          border-radius: 10px
          &:hover
            background-color: #37a426
      .author-bottom
        font-size: 13px
        color: #969696
        width: 100%
        .author-time
          float: left
          margin-right: 20px
        .author-read
          margin-left: 20px
  .author-content
    line-height: 1.7
    font-size: 16px     
</style>
